<template>
    <div class="demo-split">
        <Split v-model="split1">
            <div slot="left" class="demo-split-pane">
                <Button>add</Button>
                <Button>edit</Button>
                <Button>del</Button>
                <Divider />
                <Tree :data="data2" v-on:on-select-change="selectHandle"></Tree>
            </div>
            <div slot="right" class="demo-split-pane no-padding">
                <Split v-model="split2" mode="vertical">
                    <div slot="top" class="demo-split-pane">
                        <Button>add</Button>
                        <Button>import</Button>
                        <Button>edit</Button>
                        <Button>del</Button>
                        <Divider />
                        <Table :columns="columns1" :data="data1" v-on:on-row-click="rowSelectHandle"></Table>
                        <Divider />
                        <Page :total="40" size="small" show-elevator show-sizer />
                    </div>
                    <div slot="bottom" class="demo-split-pane">
                        <Tabs type="card">
                            <Tab-pane label="标签一">标签一的内容</Tab-pane>
                            <Tab-pane label="标签二">标签二的内容</Tab-pane>
                            <Tab-pane label="标签三">标签三的内容</Tab-pane>
                        </Tabs>
                    </div>
                </Split>
            </div>
        </Split>
    </div>
</template>
<script>
export default {
  data () {
    return {
      split1: 0.2,
      split2: 0.9,
      columns1: [
        {
          title: 'Name',
          key: 'name'
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],

      data2: [
        {
          title: 'p1'
        },
        {
          title: 'p2'
        }
      ]
    }
  },
  methods: {
    selectHandle: function (val, index) {
      console.log(val)
      console.log(index)

      // console.log(this.getSelectedNodes())
    },

    rowSelectHandle: function (rowVal, index) {
      console.log(rowVal)
      console.log(index)
    }
  }
}
</script>
<style>
    .demo-split{
        height: 1200px;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
    }
    .demo-split-pane.no-padding{
        height: 1200px;
        padding: 0;
    }
</style>
